<template>
  <header class="app-header">
    <div class="container">
        <!-- logo -->
        <h1 class="logo"><a href="#">小兔鲜</a></h1>

        <!-- 分类组件 -->
        <HeaderNav/>

        <!-- 搜索框 -->
        <div class="search">
            <i class="iconfont icon-search" @click="searchGoods"></i>
            <input type="text" placeholder="搜一搜" >
        </div>

        <!-- 购物车 -->
        <div class="cart">
            <el-icon :size="30" :color="'#333'"><ShoppingCartFull /></el-icon>
            <em>2</em>
        </div>
    </div>

  </header>
</template>

<script>
import HeaderNav from '@/components/app-header-nav.vue'

// import { SerachGoodsAPI } from '@/api/home'
export default {
  components: {
    HeaderNav
  }

}
</script>

<style lang="less" scoped>
.app-header{
    background: #fff;
    .container{
        display: flex;
        align-items: center;

        .logo{
            width: 200px;
            a{
                display: block;
                height: 132px;
                width: 100%;
                text-indent: -9999px;
                background: url(../assets/images/logo.png) no-repeat center 18px / contain;
            }
        }

        .search{
            display: flex;
            margin: 0 15px;
            border-bottom: 1px solid #eee;
            i{
                line-height: 32px;
                margin: 0 5px;
                color: #333;
                font-size: 18px;
            }
            input{
                border:none;
                width:  170px;
                height: 32px;
            }
        }
        .cart{
            position: relative;
            em {
                font-style: normal;
                position: absolute;
                right: -10px;
                top: -5px;
                padding: 1px 6px;
                line-height: 1;
                background: @helpColor;
                color: #fff;
                font-size: 12px;
                border-radius: 10px;
                font-family: Arial;
            }
        }
    }
}

</style>
